<template>
  <!-- 所有组件属性 -->
  <div class="widgrtAttrList">
    <!-- 标题 -->
    <div class="title">
      <h3>{{ type && list[type]['title'] }}</h3>
    </div>
    <!-- 组件操作信息 -->
    <component :is="type && list[type]['com']" :comData="comData" :disabledType="disabledType" @AddItem="AddItem"
      @AddItemPoster="AddItemPoster">
    </component>
  </div>
</template>

<script>
// 小组件属性
import DetailBoxAttr from '@/components/singlePage/model/widgetAttrList2/detailBoxAttr.vue'//详情信息
import PosterAttr from '@/components/singlePage/model/widgetAttrList2/posterAttr.vue'//海报位
import TextposterAttr from '@/components/singlePage/model/widgetAttrList2/textposterAttr.vue'//文字海报
import NavBox1Attr from '@/components/singlePage/model/widgetAttrList2/navBox1Attr.vue'//导航栏1
import NavBox2Attr from '@/components/singlePage/model/widgetAttrList2/navBox2Attr.vue'//导航栏2
import NavBox3Attr from '@/components/singlePage/model/widgetAttrList2/navBox3Attr.vue'//导航栏3
import ListBoxAttr from '@/components/singlePage/model/widgetAttrList2/listBoxAttr.vue'//列表页

import { DETAIL_ATTRLIST } from '@/commont/constants/otherConfig'; // 静态配置
export default {
  name: "widgrtAttrList",
  components: {
    DetailBoxAttr, PosterAttr, TextposterAttr,
    NavBox1Attr, NavBox2Attr, NavBox3Attr, ListBoxAttr
  },
  props: {
    comData: {
      type: Object,
      default: () => { }
    },
    disabledType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: DETAIL_ATTRLIST,
    }
  },
  computed: {
    type() {
      //组件类型
      return this.comData.type;
    }
  },
  watch: {},
  mounted() { },
  methods: {
    // 添加推荐位
    AddItem(data) {
      this.$emit('AddItem', data);
    },
    // 添加海报位
    AddItemPoster(data) {
      this.$emit('AddItemPoster', data);
    },

  }
}
</script>

<style lang="scss" scoped>
.widgrtAttrList {
  margin-top: 15px;

  // 标题
  .title {
    display: flex;
    align-items: center;
    padding: 0 15px;

    h3 {
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }

    // 编辑提示
    .tips {
      color: #e6a23c;
      margin-left: 10px;

      &:hover {
        .tipsCon {
          display: block;
        }
      }
    }

    .tipsCon {
      display: none;
      background: #fff;
      padding: 10px;
      border: 1px solid #cdcdcd;
      position: absolute;
      top: 40px;
      z-index: 9;
    }
  }

  // 模板信息
  .comInfo {
    margin-top: 10px;
    margin-left: 5px;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 8px;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;

      &:nth-last-child(1) {
        border: none;
      }

      .label {
        width: 80px;
        font-weight: bold;
      }

      .infoCon {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        div {
          display: flex;
          align-items: center;
        }
      }
    }
  }

}
</style>